<template>
  <el-select-v2
      v-model="model"
      :multiple="isSelectorMultiple"
      :options="options"
      :props="selectorProps"
      value-key="salaryitem_id"
  />
</template>
<script lang="ts" setup>
import {computed, ref} from "vue"
import {ElSelectV2} from "element-plus";
import {getSalaryItems} from "@/api/salaryItem";
import SalaryItemResponse from "@/api/types/salaryItem/SalaryItemResponse";

const model = defineModel<number | number[]>()
const props = defineProps<{ type: "salaryItem" | "salaryItems" }>()
const options = ref<SalaryItemResponse[]>([])
const selectorProps = {
  label: "salaryitem_name",
  value: "salaryitem_id"
}
const isSelectorMultiple = computed(() => {
  switch (props.type) {
    case "salaryItem":
      return false
    case "salaryItems":
      return true
  }
})

async function getData() {
  const {data} = await getSalaryItems()
  if (data?.info_list !== undefined) {
    options.value = data.info_list
  }
}

getData()
</script>
